<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            font: 14px "思源黑体", "微软雅黑", arial;
            color: #000000;
            background: #fff;
            margin: 0 auto;
            padding: 0;
            max-width: 1920px;
            min-width: 320px;
        }

        .el-menu--horizontal > .el-menu-item {
            background-color: black !important;
            font-size: 12px;
        }

        .el-menu--horizontal {
            background-color: black !important;
        }

        .el-menu--horizontal > .el-menu-item {
            position: relative;
        }

        .el-menu--horizontal > .el-menu-item:hover {
            border-bottom: 2px solid red !important;
        }

        .el-menu--horizontal > .el-menu-item:hover #show1 {
            display: block;
        }

        .el-menu--horizontal > .el-menu-item:hover #show2 {
            display: block;
        }

        .el-menu--horizontal > .el-menu-item:hover #show3 {
            display: block;
        }

        .el-menu--horizontal > .el-menu-item:hover #show4 {
            display: block;
        }

        .el-menu.el-menu--horizontal {
            border: 0;
        }

        #show1 {
            display: none;
            margin: 0 auto;
            width: 1560px;
            height: 530px;
            z-index: 9999;
            position: absolute;
            left: -180px;
            color: black;
            background-color: white;
        }

        #show2 {
            display: none;
            margin: 0 auto;
            width: 1560px;
            height: 150px;
            z-index: 9999;
            position: absolute;
            left: -245px;
            color: black;
            background-color: white;
        }

        #show3 {
            display: none;
            margin: 0 auto;
            width: 1560px;
            height: 150px;
            z-index: 9999;
            position: absolute;
            left: -345px;
            color: black;
            background-color: white;
        }

        #show4 {
            display: none;
            margin: 0 auto;
            width: 1560px;
            height: 150px;
            z-index: 9999;
            position: absolute;
            left: -432px;
            color: black;
            background-color: white;
        }

        #topPart {
            margin: 0 auto;
            width: 1200px;
            height: 630px;
            overflow: hidden;
            position: relative;
            top: 10px;
            right: 50px;
        }

        #show2 > div, #show3 > div, #show4 > div {
            margin: 0 auto;
            width: 900px;
            overflow: hidden;
        }

        #show2 > div {
            position: relative;
            right: 100px;
            top: 20px;
        }

        #show3 > div {
            position: relative;
            top: 20px;
            right: 7px;
        }

        #show4 > div {
            position: relative;
            top: 20px;
            left: 85px;
        }

        .introduction {
            background-color: white;
            width: 230px;
            height: 250px;
            float: left;
            margin: 0 80px 15px 80px;
        }

        .leftPart {
            float: left;
        }

        .rightPart {
            float: right;
        }

        .rightPart > ul {
            list-style-type: none;
        }

        .rightPart > ul li {
            height: 20px;
            vertical-align: middle;
            margin: 7px 0;

        }

        .productLink {
            text-decoration: none;
            color: black;
            font-size: 12px;
        }

        .rightPart > ul li:hover {
            color: red;
        }

        .firstProductLink {
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            color: black;
        }

        .firstProductLinkLi {
            margin-bottom: 50px;
        }

        .introductionImages {
            width: 100px;
            height: 100px;
            position: relative;
            top: 20px;
        }

        #middle {
            padding: 0 10px;
            background-color: #eaeef1;
            overflow: hidden;
        }

        .middlePart {
            text-align: center;
            display: inline-block;
            color: #333333;
            text-decoration: none;
            float: left;
            width: 48.5%;
            position: relative;
            padding: 20px 10px 0 10px;
            overflow: hidden;
            height: 100%;
            transition: all 0.3s;
            cursor: pointer;
        }

        .middlePart:hover {
            transform: scale(1.01);
        }

        .middleImage {
            vertical-align: middle;
            font-size: 0;
            border: 0;
            outline: none;
            max-width: 100%;
            overflow: hidden;
        }

        .middleText {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            text-align: center;
            padding-top: 10%;
        }

        .middleTextPart1 {
            color: #FFFFFF;
            overflow: hidden;
            font-weight: bold;
            font-size: 32px;
            margin: 30px 0 10px 0;
        }

        .middleTextPart2 {
            color: #a4a9ad;
            overflow: hidden;
            font-size: 16px;
            margin: 10px 0 0 0;
        }

        .middleTextPart3 {
            display: inline-block;
            color: #a4a9ad;
            margin-top: 30px;
            font-weight: bold;
            font-size: 16px;
        }

        #bottom {
            padding: 72px 0 72px 0;
            background-color: #eaeef1;
            overflow: hidden;
            margin: 0 auto;

        }

        #divInBottom {
            width: 94%;
            margin: 0 auto;
            background-color: #eaeef1;
            overflow: hidden;
        }

        #bottomLeftPart {
            background-color: #eaeef1;
            width: 30%;
            color: #000;
            line-height: 1.5625em;
            font-style: italic;
            padding-top: 7%;
            padding-bottom: 16%;
            position: relative;
            float: left;
            left: 120px;

        }

        #spider {
            vertical-align: middle;
            font-size: 0;
            border: 0;
            outline: none;
            max-width: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 5%;
            right: 0;
        }

        #decorate {
            vertical-align: middle;
            font-size: 0;
            border: 0;
            outline: none;
            max-width: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #bottomRightPart {
            width: 62%;
            float: right;
            margin: 0 auto;
            position: relative;
            left: 50px;
        }

        #bottom2 {
            padding: 15px 0;
            font-size: 40px;
            overflow: hidden;

        }

        #bottom2 > ul {
            width: 85%;
            margin: 0 auto;
            list-style-type: none;
        }

        #bottom2 > ul > li {
            width: 33.333333%;
            float: left;
            padding: 30px 0;
            line-height: 2.25em;
            text-align: center;
            box-sizing: border-box;
            position: relative;
        }

        #bottom2 > ul > li > a {
            display: block;
            position: relative;
            color: #333333;
            text-decoration: none;
            outline: none;
            transition: all 1s;

        }

        #bottom2 > ul > li > a:hover {
            transform: scale(1.03);
            color: #aaaaaa;
        }

        .borderRequired {
            border-left: 1px solid #a4a9ad;
        }

        #bottom3 {
            background-color: #000000;
            padding: 72px 0 72px 0;
            overflow: hidden;

        }

        #bottom3 > div {
            width: 85%;
            margin: 0 auto;
            overflow: hidden;
        }

        #bottom3LeftPart {
            float: left;
        }

        .linkDiv {
            float: left;
            margin-right: 200px;
        }

        .firstLink {
            color: #FFFFFF;
            text-decoration: none;
            outline: none;
        }

        .otherLink {
            font-size: 12px;
            text-decoration: none;
            outline: none;
            color: #a4a9ad;
            transition: all 0.5s
        }

        .otherLink:hover {
            color: #fff;
        }

        #bottom3RightPart {
            float: right;
        }

        .picLink {
            margin-right: 15px;
        }

        #backTopImage {
            position: relative;
            left: 110px;
            top: 50px;
        }

        #topOfBottom3 {
            border-bottom: 1px solid #FFFFFF;
        }

        #copyRight {
            color: #fff;
            float: left;
            font-size: 12px;
            margin-top: 20px;
        }

        #gifNextToCopyRight {
            position: relative;
            top: 17px;
            left: 3px;
        }

        .el-input__inner {
            background-color: black;
            border: 0;
            color: white;
            text-align: right;
        }

        .el-select {
            position: absolute;
            right: 0;
            top: 10px;
        }

        #bottomOfBottom3 {
            position: relative;
        }

        [class*=" el-icon-"], [class^=el-icon-] {
            color: white;
            font-size: 20px;
            position: absolute;
            right: 100px;
            top: 20px;
            z-index: 10;
        }

        .topLinks {
            float: left;
            margin: 0 40px 0 40px;
        }

        .topLinks > div > img {
            position: relative;
            left: 5px;
        }

        .topLinks > div > a {
            text-decoration: none;
            color: black;
            text-align: center;
            font-size: 12px;
        }

        .topLinks > div:hover {
            color: red;
        }

        .el-input--mini .el-input__inner {
            background-color: white;
            color: black;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">

    <!--最上面的黑条开始-->
    <div style="width: 100%;height:60px;background-color: black;position: fixed;z-index: 99999999">
        <el-menu style="width: 1200px;margin: 0 auto"
                 default-active="1"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 text-color="#fff"
                 active-text-color="#fff">
            <el-menu-item index=1>产品
                <div id="show1">
                    <!--产品悬停弹出开始-->
                    <div id="topPart">
                        <!--里面的超链接是跳转各商品的页面-->
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/1.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">机箱</a></li>
                                    <li><a href="" class="productLink">全塔机箱</a></li>
                                    <li><a href="" class="productLink">中塔机箱</a></li>
                                    <li><a href="" class="productLink">小型机箱</a></li>
                                    <li><a href="" class="productLink">机箱配件</a></li>
                                    <li><a href="" class="productLink">MINI</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/2.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">电源</a></li>
                                    <li><a href="" class="productLink">AR</a></li>
                                    <li><a href="" class="productLink">FK</a></li>
                                    <li><a href="" class="productLink">黑泽式</a></li>
                                    <li><a href="" class="productLink">蒸汽朋克</a></li>
                                    <li><a href="" class="productLink">DK</a></li>
                                    <li><a href="" class="productLink">PRO</a></li>
                                    <li><a href="" class="productLink">黑寡妇</a></li>
                                    <li><a href="" class="productLink">火玫瑰</a></li>
                                    <li><a href="" class="productLink">火舞</a></li>
                                    <li><a href="" class="productLink">线材</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/3.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">散热</a></li>
                                    <li><a href="" class="productLink">CPU散热</a></li>
                                    <li><a href="" class="productLink">单体风扇</a></li>
                                    <li><a href="" class="productLink">笔记本散热</a></li>
                                    <li><a href="" class="productLink">水冷散热</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/4.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">外设</a></li>
                                    <li><a href="" class="productLink">键盘</a></li>
                                    <li><a href="" class="productLink">鼠标</a></li>
                                    <li><a href="" class="productLink">鼠标垫</a></li>
                                    <li><a href="" class="productLink">音频</a></li>
                                    <li><a href="" class="productLink">套装</a></li>
                                    <li><a href="" class="productLink">外设配件</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/5.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">电竞桌椅</a></li>
                                    <li><a href="" class="productLink">电竞沙发</a></li>
                                    <li><a href="" class="productLink">电竞椅</a></li>
                                    <li><a href="" class="productLink">电竞桌</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="introduction">
                            <div class="leftPart">
                                <img src="imagesOfIndex/6.png" alt="" class="introductionImages">
                            </div>
                            <div class="rightPart">
                                <ul>
                                    <li class="firstProductLinkLi"><a href="" class="firstProductLink">其他配件</a></li>
                                    <li><a href="" class="productLink">游戏包</a></li>
                                    <li><a href="" class="productLink">t恤</a></li>
                                    <li><a href="" class="productLink">帽子</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--产品悬停弹出结束-->
                </div>
            </el-menu-item>
            <el-menu-item index=2>服务与支持
                <div id="show2">
                    <div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/j.png" alt=""></div>
                            <div><a href="">壁纸下载</a></div>
                        </div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/k.png" alt=""></div>
                            <div><a href="">软件下载</a></div>
                        </div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/l.png" alt=""></div>
                            <div><a href="">专业评测</a></div>
                        </div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/m.png" alt=""></div>
                            <div><a href="">售后信息</a></div>
                        </div>
                    </div>
                </div>
            </el-menu-item>
            <el-menu-item index=3>销售网点
                <div id="show3">
                    <div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/n.png" alt=""></div>
                            <div><a href="">在线网点</a></div>
                        </div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/o.png" alt=""></div>
                            <div><a href="">线下网点</a></div>
                        </div>
                    </div>
                </div>
            </el-menu-item>
            <el-menu-item index=4>关于我们
                <div id="show4">
                    <div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/p.png" alt=""></div>
                            <div><a href="">品牌介绍</a></div>
                        </div>
                        <div class="topLinks">
                            <div><img src="imagesOfIndex/q.png" alt=""></div>
                            <div><a href="">联系我们</a></div>
                        </div>
                    </div>
                </div>
            </el-menu-item>
            <el-menu-item id="1stItem" style="position:relative;left: 200px;"><a href="" id="1st"><img
                    src="imagesOfIndex/1st.png" alt=""></a></el-menu-item>
            <el-menu-item style="float: right">
                <el-input size="mini" v-model="wd" placeholder="请输入关键字搜索"></el-input>
            </el-menu-item>
            <el-button
                    style="float: right;background-color: rgba(0,0,0,0);border:none;position: relative;left: 340px;top:3px"
                    icon="el-icon-search"></el-button>
            <el-menu-item style="float: right;position: relative;left:50px"><a href="/product_details.html" style="text-decoration: none;">SHOP</a>
            </el-menu-item>
        </el-menu>
    </div>
    <!--最上面的黑条结束-->

    <!--轮播图开始-->
    <div id="carousel">
        <template>
            <div>
                <el-carousel height="600px" direction="horizontal" :autoplay="false" style="margin: 0 auto">
                    <el-carousel-item v-for="item in itemArr" :key="item" style="margin: 0 auto">
                        <!--这个地方 整张图都是超链接 可以直接点 后期可以属性绑定这个地址-->
                        <div class="medium"><a href=""><img :src=item.url style="width: 100%;height: 100%" alt=""></a>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </template>
    </div>
    <!--轮播图结束-->

    <!--电脑机箱 电脑电源 电脑外设 电竞家具部分开始-->
    <div id="middle">
        <!--电脑机箱超链接-->
        <a href="" class="middlePart">
            <img src="imagesOfIndex/a.png" alt="" class="middleImage">
            <div class="middleText">
                <h3 class="middleTextPart1">电脑机箱</h3>
                <p class="middleTextPart2">强大保护，勇往直前</p>
                <h4 class="middleTextPart3">了解更多</h4>
            </div>
        </a>

        <!--电脑电源超链接-->
        <a href="" class="middlePart">
            <img src="imagesOfIndex/b.png" alt="" class="middleImage">
            <div class="middleText">
                <h3 class="middleTextPart1">电脑电源</h3>
                <p class="middleTextPart2">战斗不止，输出不断</p>
                <h4 class="middleTextPart3">了解更多</h4>
            </div>
        </a>
        <!--电脑外设超链接-->
        <a href="" class="middlePart">
            <img src="imagesOfIndex/c.png" alt="" class="middleImage">
            <div class="middleText">
                <h3 class="middleTextPart1">电脑外设</h3>
                <p class="middleTextPart2">单枪匹马，背水一战</p>
                <h4 class="middleTextPart3">了解更多</h4>
            </div>
        </a>
        <!--电竟家具超链接-->
        <a href="" class="middlePart">
            <img src="imagesOfIndex/d.png" alt="" class="middleImage">
            <div class="middleText">
                <h3 class="middleTextPart1">电竞家具</h3>
                <p class="middleTextPart2">身临其境，无所畏惧</p>
                <h4 class="middleTextPart3">了解更多</h4>
            </div>
        </a>
    </div>
    <!--电脑机箱 电脑电源 电脑外设 电竞家具部分结束-->

    <!--首席玩家 品牌宗旨开始-->
    <div id="bottom">
        <div id="divInBottom">
            <div id="bottomLeftPart">
                <img src="imagesOfIndex/e.png" alt="" id="spider">
                <h3>“首席玩家”品牌宗旨</h3>
                <span>1STPLAYER强调原创设计，不走平常路。虽然对美学有不同理解，对游戏有不同偏好，对PC有不同的钟爱，但不妨碍我们达成共识：对技术的溺爱，对原创的秉持，对专业的尊重，持续改进易用和可玩度，不断尝试否定与被否定，苛刻地改进每一个细节，只为赢得玩家的尖叫。</span>
                <img src="imagesOfIndex/f.png" alt="" id="decorate">
            </div>
            <div id="bottomRightPart">
                <img src="imagesOfIndex/g.jpg" alt="">
            </div>
        </div>
    </div>
    <!--首席玩家 品牌宗旨结束-->

    <!--服务与支持 销售网点 品牌介绍开始-->
    <div id="bottom2">
        <ul>
            <!--服务与支持 销售网点 品牌介绍三个超链接-->
            <li><a href="">服务与支持</a></li>
            <li class="borderRequired"><a href="">销售网点</a></li>
            <li class="borderRequired"><a href="">品牌介绍</a></li>
        </ul>
    </div>
    <!--服务与支持 销售网点 品牌介绍结束-->

    <!--最下方黑条开始-->
    <div id="bottom3">
        <div id="topOfBottom3">
            <div id="bottom3LeftPart">
                <!--下方黑条左侧的超链接-->
                <div class="linkDiv">
                    <p><a href="/" class="firstLink">服务与支持</a></p>
                    <p><a href="/" class="otherLink">壁纸下载</a></p>
                    <p><a href="/" class="otherLink">软件下载</a></p>
                    <p><a href="/" class="otherLink">专业评测</a></p>
                    <p><a href="/" class="otherLink">售后信息</a></p>
                </div>
                <div class="linkDiv">
                    <p><a href="/" class="firstLink">销售网点</a></p>
                    <p><a href="/" class="otherLink">在线网点</a></p>
                    <p><a href="/" class="otherLink">线下网点</a></p>
                </div>
                <div class="linkDiv">
                    <p><a href="/" class="firstLink">品牌介绍</a></p>
                    <p><a href="/" class="otherLink">品牌介绍</a></p>
                    <p><a href="/" class="otherLink">联系我们</a></p>
                </div>
                <div></div>
            </div>
            <div id="bottom3RightPart">
                <!--最下方黑条右侧的图片超链接-->
                <div>
                    <a href="" class="picLink"><img src="imagesOfIndex/flink_icon1.png" alt=""></a>
                    <a href="" class="picLink"><img src="imagesOfIndex/flink_icon2.png" alt=""></a>
                    <a href="" class="picLink"><img src="imagesOfIndex/flink_icon3.png" alt=""></a>
                    <a href="" class="picLink"><img src="imagesOfIndex/flink_icon4.png" alt=""></a>
                </div>
                <div>
                    <!--这里给一个顶部元素的id,实现跳转回页面最上方功能-->
                    <a href="#app"><img src="imagesOfIndex/h.png" alt="" id="backTopImage"></a>
                </div>
            </div>
        </div>
        <div id="bottomOfBottom3">
            <p id="copyRight">Copyright © 2020 1STPLAYER All Rights Reserved.</p>
            <!--这里不知道是什么链接 可能和网站没啥关系-->
            <a href="" id="gifNextToCopyRight"><img src="imagesOfIndex/i.gif" alt=""></a>
            <i class="el-icon-location-outline"></i>
            <template id="selector">
                <el-select v-model="value" placeholder="">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
    </div>
    <!--最下方黑条结束-->

</div>
</body>
<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                itemArr: [
                    {url: "imagesOfIndex/banner1.jpg"},
                    {url: "imagesOfIndex/banner2.jpg"},
                    {url: "imagesOfIndex/banner3.jpg"},
                    {url: "imagesOfIndex/banner4.png"},
                    {url: "imagesOfIndex/banner5.jpg"},
                ],
                options: [{
                    value: '选项1',
                    label: 'English'
                }, {
                    value: '选项2',
                    label: '简体中文'
                }, {
                    value: '选项3',
                    label: '繁体中文'
                }, {
                    value: '选项4',
                    label: '日本语'
                }],
                value: "选项2",
                wd: ""
            }
        },
        methods: {
            handleSelect() {
            }
        }
    })
</script>
</html>